<h1 mat-dialog-title>{{ device.displayName }}</h1>
<mat-dialog-content>
<mat-tab-group>
  <mat-tab label="Overview">
<mat-card>
      <table class="userTable">
        <tr><th>Display name</th><td>{{ device.displayName }}</td></tr>
        <tr><th>ObjectId</th><td>{{ device.objectId }}</td></tr>
        <tr><th>Device ID</th><td>{{ device.deviceId }}</td></tr>
        <tr *ngIf="showPortalLink"><th>Manage in Entra portal</th><td><a target="_blank" href="https://entra.microsoft.com/#view/Microsoft_AAD_Devices/DeviceDetailsMenuBlade/~/Properties/objectId/{{ device.objectId }}/deviceId/"><mat-icon>open_in_new</mat-icon></a></td></tr>
      </table>
    </mat-card>
    <mat-divider></mat-divider>
    <mat-expansion-panel *ngIf="device.owner.length > 0"  expanded>
      <mat-expansion-panel-header>
        <mat-panel-title>
          Owners ({{ device.owner.length }})
        </mat-panel-title>
      </mat-expansion-panel-header>

      <table mat-table [dataSource]="device.owner" class="full-width-table">
        <ng-container matColumnDef="displayName">
          <th mat-header-cell *matHeaderCellDef>Name</th>
          <td mat-cell *matCellDef="let row"><a [routerLink]="['/users/', row.objectId]">{{row.displayName}}</a></td>
        </ng-container>

        <ng-container matColumnDef="userPrincipalName">
          <th mat-header-cell *matHeaderCellDef>userPrincipalName</th>
          <td mat-cell *matCellDef="let row">{{row.userPrincipalName}}</td>
        </ng-container>
        <tr mat-header-row *matHeaderRowDef="displayedColumnsOwners"></tr>
        <tr mat-row *matRowDef="let row; columns: displayedColumnsOwners;"></tr>
      </table>
    </mat-expansion-panel>
    </mat-tab>
  <mat-tab label="Bitlocker Keys" *ngIf="blkeys.length > 0">
    <table mat-table [dataSource]="blkeys">
      <ng-container matColumnDef="keyIdentifier">
        <th mat-header-cell *matHeaderCellDef>Identifier</th>
        <td mat-cell *matCellDef="let row">{{row.keyIdentifier}}</td>
      </ng-container>
      <ng-container matColumnDef="keyMaterial">
        <th mat-header-cell *matHeaderCellDef>Recovery key</th>
        <td mat-cell *matCellDef="let row">{{row.keyMaterial}}</td>
      </ng-container>
      <tr mat-header-row *matHeaderRowDef="displayedColumnsBLKeys"></tr>
      <tr mat-row *matRowDef="let row; columns: displayedColumnsBLKeys;"></tr>
    </table>
  </mat-tab>
  <mat-tab label="Raw"><p appJsonFormat [json]="device"></p></mat-tab>
</mat-tab-group>
</mat-dialog-content>

